import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';

class NavigationBarItem {
  final IconData iconData;
  final String label;
  final int index;

  NavigationBarItem({
    required this.iconData,
    required this.label,
    required this.index,
  });
}

class FloatingNavigationBar extends StatefulWidget {
  final Function(int) onTabSelected;
  final int currentIndex;

  const FloatingNavigationBar({
    super.key,
    required this.onTabSelected,
    required this.currentIndex,
  });

  @override
  State<FloatingNavigationBar> createState() => _FloatingNavigationBarState();
}

class _FloatingNavigationBarState extends State<FloatingNavigationBar> {
  final List<NavigationBarItem> _navigationItems = [
    NavigationBarItem(
      iconData: Icons.home_outlined,
      label: 'FRONT PAGE',
      index: 0,
    ),
    NavigationBarItem(
      iconData: Icons.people_outline,
      label: 'COMMUNITY',
      index: 1,
    ),
    NavigationBarItem(
      iconData: Icons.info_outline,
      label: 'INFORMATION',
      index: 2,
    ),
    NavigationBarItem(
      iconData: Icons.person_outline,
      label: 'PERSONAL',
      index: 3,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: 16.w,
      right: 16.w,
      bottom: 54.h,
      child: Container(
        height: 70.h,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.1),
              blurRadius: 10,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        clipBehavior: Clip.none,
        child: Stack(
          children:
              _navigationItems.asMap().entries.map((entry) {
                final index = entry.key;
                final item = entry.value;
                final isSelected = widget.currentIndex == item.index;

                final itemWidth =
                    (MediaQuery.of(context).size.width - 32.w) / 4;
                final leftPosition = itemWidth * index + itemWidth / 2 - 18.w;

                return AnimatedPositioned(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  left: leftPosition,
                  bottom: isSelected ? 42.h : 27.h,
                  child: _buildNavigationItemStatic(item, isSelected),
                );
              }).toList(),
        ),
      ),
    );
  }

  Widget _buildNavigationItemStatic(NavigationBarItem item, bool isSelected) {
    return GestureDetector(
      onTap: () => widget.onTabSelected(item.index),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 36.w,
            height: 36.w,
            decoration: BoxDecoration(
              color: isSelected ? Colors.blue.shade100 : Colors.transparent,
              shape: BoxShape.circle,
            ),
            child:
                Icon(
                  item.iconData,
                  size: 20.w,
                  color:
                      isSelected ? Colors.blue.shade600 : Colors.grey.shade500,
                ).center(),
          ),
          if (isSelected) ...[
            SizedBox(height: 2.h),
            Text(
              item.label,
              style: TextStyle(
                fontSize: 8.sp,
                color: Colors.blue.shade600,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ],
      ),
    );
  }
}
